<template>
	<div>
		<div class="demo-input-suffix">
			<div class="elp">
				<el-input
					style="width: 25%"
					placeholder="请输入量表编号"
					prefix-icon="el-icon-search"
					v-model="file_id"
					clearable
				>
				</el-input>
				<el-input
					style="width: 25%"
					placeholder="请输入受访者姓名"
					prefix-icon="el-icon-search"
					v-model="interviewee"
					clearable
				>
				</el-input>
				<el-input
					style="width: 25%"
					placeholder="请输入受访者身份证号码"
					prefix-icon="el-icon-search"
					v-model="id_num"
					clearable
				>
				</el-input>
				<el-input
					style="width: 25%"
					placeholder="请输入研究者姓名"
					prefix-icon="el-icon-search"
					v-model="researcher"
					clearable
				>
				</el-input>
			</div>
			<div class="edp">
				<el-date-picker
					v-model="startDate"
					type="date"
					style="width: 25%"
					placeholder="选择开始日期"
				>
				</el-date-picker>
				<el-date-picker
					v-model="endDate"
					type="date"
					style="width: 25%"
					placeholder="选择结束日期"
				>
				</el-date-picker>
				<el-input
					style="width: 50%"
					placeholder="请输入录入者用户名"
					prefix-icon="el-icon-search"
					v-model="username"
					clearable
				>
				</el-input>
			</div>
			<div class="btn">
				<el-button @click="search" type="primary" icon="el-icon-search">
					查询
				</el-button>
				<el-button
					@click="resetForm"
					type="primary"
					icon="el-icon-refresh-right"
				>
					重置
				</el-button>
				<el-button @click="exportXls" type="primary" icon="el-icon-download">
					导出
				</el-button>
			</div>
		</div>
		<el-table
			:data="tableData"
			border
			style="width: 100%"
			cell-class-name="cell-class-name"
			:header-cell-style="{ background: 'rgb(188,222,233)' }"
		>
			<el-table-column
				fixed
				prop="file_id"
				label="量表编号"
				width="120"
				class="el"
			>
			</el-table-column>
			<el-table-column
				prop="survey_area"
				label="调查地区"
				width="80"
				class="el"
			>
			</el-table-column>
			<el-table-column prop="interviewee" label="受访者姓名" width="100">
			</el-table-column>
			<el-table-column prop="id_num" label="身份证号码" width="170">
			</el-table-column>
			<el-table-column prop="address" label="家庭住址" width="160">
			</el-table-column>
			<el-table-column prop="nation" label="民族" width="90"> </el-table-column>
			<el-table-column prop="researcher" label="研究者姓名" width="100">
			</el-table-column>
			<el-table-column prop="date" label="开始日期" width="120">
			</el-table-column>
			<el-table-column prop="phone" label="联系方式" width="140">
			</el-table-column>
			<el-table-column prop="remarks" label="备注" width=""> </el-table-column>
			<el-table-column
				fixed="right"
				prop="username"
				label="录入者用户名"
				width="110"
			>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="120">
				<template slot-scope="scope">
					<el-button @click="view(scope.row)" type="text" size="small"
						>查看</el-button
					>
					<el-button @click="deletefile(scope.row)" type="text" size="small"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<div class="bbb">
			<el-pagination
				background
				layout="total, prev, pager, next"
				:page-size="pageSize"
				:total="total"
				@current-change="page"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import baseUrl from "../../utils/baseURL";
	export default {
		methods: {
			deletefile(row) {
				const _this = this;
				let userData = JSON.parse(window.localStorage.getItem("userData"));
				let role = userData.role;
				if (role == "user") {
					if (row.username == userData.username) {
						this.$confirm("此操作将永久删除该量表, 是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						})
							.then(() => {
								axios
									.post(baseUrl + "/fileInfo/deleteFileInfo", {
										file_id: row.file_id,
									})
									.then(function (resp) {
										_this.$alert("删除成功", "消息", {
											confirmButtonText: "确定",
											callback: (action) => {
												window.location.reload();
											},
										});
									});
							})
							.catch(() => {
								this.$message({
									type: "info",
									message: "已取消删除",
								});
							});
					} else {
						this.$alert("您没有权限进行此操作！", "提示", {
							confirmButtonText: "确定",
							callback: (action) => {},
						});
					}
				} else {
					this.$confirm("此操作将永久删除该量表, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
						.then(() => {
							axios
								.post(baseUrl + "/fileInfo/deleteFileInfo", {
									file_id: row.file_id,
								})
								.then(function (resp) {
									_this.$alert("删除成功", "消息", {
										confirmButtonText: "确定",
										callback: (action) => {
											window.location.reload();
										},
									});
								});
						})
						.catch(() => {
							this.$message({
								type: "info",
								message: "已取消删除",
							});
						});
				}
			},
			page(currentPage) {
				const _this = this;
				axios
					.post(baseUrl + "/fileInfo/selectFileInfo", {
						file_id: _this.file_id,
						interviewee: _this.interviewee,
						id_num: _this.id_num,
						researcher: _this.researcher,
						username: _this.username,
						startDate: _this.startDate,
						endDate: _this.endDate,
						pageNum: currentPage,
						pageSize: 10,
					})
					.then(function (resp) {
						_this.tableData = resp.data.data.records;
						_this.total = resp.data.data.total;
					});
			},
			search() {
				const _this = this;
				axios
					.post(baseUrl + "/fileInfo/selectFileInfo", {
						file_id: _this.file_id,
						interviewee: _this.interviewee,
						id_num: _this.id_num,
						researcher: _this.researcher,
						username: _this.username,
						startDate: _this.startDate,
						endDate: _this.endDate,
						pageNum: 1,
						pageSize: 10,
					})
					.then(function (resp) {
						_this.tableData = resp.data.data.records;
						_this.total = resp.data.data.total;
					});
			},
			view(row) {
				let userData = JSON.parse(window.localStorage.getItem("userData"));
				let role = userData.role;
				if (role == "user") {
					if (row.username == userData.username) {
						this.$router.push({
							name: "/UpdateFile",
							params: {
								file_id: row.file_id,
							},
						});
					} else {
						this.$router.push({
							name: "/CheckFile",
							params: {
								file_id: row.file_id,
							},
						});
					}
				} else {
					this.$router.push({
						name: "/UpdateFile",
						params: {
							file_id: row.file_id,
						},
					});
				}
			},

			resetForm() {
				(this.file_id = ""),
					(this.interviewee = ""),
					(this.id_num = ""),
					(this.researcher = ""),
					(this.startDate = ""),
					(this.endDate = ""),
					(this.username = "");
				this.search();
			},
			exportXls() {
				const _this = this;
				window.open(
					baseUrl +
						"/exportXls" +
						"?file_id=" +
						_this.file_id +
						"&interviewee=" +
						_this.interviewee +
						"&id_number=" +
						_this.id_num +
						"&researcher=" +
						_this.researcher +
						"&username=" +
						_this.username +
						"&startDate=" +
						_this.startDate +
						"&endDate=" +
						_this.endDate
				);
			},
			createFile() {
				const _this = this;
				axios
					.post(baseUrl + "/fileInfo/selectFileInfo", {
						pageNum: 1,
						pageSize: 10,
					})
					.then(function (resp) {
						console.log(resp);
						if (resp.data.code == 200) {
							console.log("加载成功");
							_this.tableData = resp.data.data.records;
							_this.total = resp.data.data.total;
						} else {
							_this.$store.commit("LOGIN_OUT");
							window.location.reload();
						}
					});
			},
		},
		created() {
			this.createFile();
		},

		data() {
			return {
				total: null,
				tableData: null,
				file_id: "",
				survey_area: "",
				interviewee: "",
				id_num: "",
				researcher: "",
				startDate: "",
				endDate: "",
				username: "",
				pageNum: 1,
				pageSize: 10,
			};
		},
	};
</script>

<style>
	.el-table__body .el-table__row.hover-row td {
		background-color: #e0ffff;
	}
	.demo-input-suffix {
		margin-top: 10px;
	}

	.elp {
		margin: 5px;
	}

	.elp .el-input {
		padding: 0 5px;
	}

	.edp {
		margin: 5px;
	}

	.edp .el-input {
		padding: 0 5px;
	}

	.btn {
		margin: 5px;
	}

	.el-table .el-button {
		color: #84b2dd;
	}

	.el-table .el-button:hover {
		color: #719ac3;
	}

	.bbb .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #719ac3;
	}

	.bbb .el-pagination.is-background .el-pager li:not(.disabled):hover {
		color: #719ac3;
	}

	.demo-input-suffix .el-button {
		margin-left: 5px;
		background-color: #719ac3;
		border: 2px solid #719ac3;
	}
	.demo-input-suffix .el-button:hover {
		background-color: #84b2dd;
		border: 2px solid #84b2dd;
	}
</style>